<template>
	<view>
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<view class="muu-classroom" :class="[config.style]">
			<view class="main-section tabbar-bottom" v-if="!loading">
				<view class="item" v-for="(item,index) in processData" :key="index">
					<view v-if="item.type==='announce'">
						<Announce title="公告组件" type="announce" :params="item.data" :config="config" />
					</view>
					<view v-if="item.type==='article_list'">
						<ArticleList title="文章列表组件" type="article_list" :params="item.data" :config="config" />
					</view>
					<view v-if="item.type==='category'">
						<Category title="分类组件" type="category" :params="item.data" :config="config" />
					</view>
					<view v-if="item.type==='column_list'">
						<ColumnList title="专栏列表组件" type="column_list" :params="item.data" :config="config" />
					</view>
					<view v-if="item.type==='category_nav'">
						<CategoryNav title="图文导航组件" type="category_nav" :params="item.data" :config="config" />
					</view>
					<view v-if="item.type==='custom_form'">
						<CustomForm title="自定义表单组件" type="custom_form" :params="item" :config="config" />
					</view>
					<view v-if="item.type==='custom_text'">
						<CustomText title="自定义文本组件" type="custom_text" :params="item.data" :config="config" />
					</view>
					<view v-if="item.type==='exam_paper_list'">
						<ExamPaperList title="题库试卷组件" type="exam_paper_list" :params="item.data" :config="config" />
					</view>
					<view v-if="item.type==='knowledge_list'">
						<KnowledgeList title="课程列表组件" type="knowledge_list" :params="item.data" :config="config" />
					</view>
					<view v-if="item.type==='live_list'">
						<LiveList title="直播课堂列表组件" type="live_list" :params="item.data" :config="config" />
					</view>
					<view v-if="item.type==='miniprogram_live_list'">
						<MiniprogramLiveList title="小直播列表组件" type="miniprogram_live_list" :params="item.data" :config="config" />
					</view>
					<view v-if="item.type==='material_list'">
						<MaterialList title="资料下载列表组件" type="material_list" :params="item.data" :config="config" />
					</view>
					<view v-if="item.type==='member'">
						<Member title="会员服务组件" type="member" :config="config" />
					</view>
					<view v-if="item.type==='offline_list'">
						<OfflineList title="线下课列表组件" type="offline_list" :params="item.data" :config="config" />
					</view>
					<view v-if="item.type==='search'">
						<Search title="搜索组件" type="search" :config="config" />
					</view>
					<view v-if="item.type==='slideshow'">
						<SlideShow title="轮播组件" type="slideshow" :slideshowStyle="Number(item.style)" :params="item.data" :config="config" />
					</view>
					<view v-if="item.type==='single_img'">
						<SingleImg title="单图广告组件" type="single_img" :singleImgStyle="Number(item.style)" :params="item.data" :config="config"/>
					</view>
					<view v-if="item.type==='teacher_list'">
						<TeacherList title="教师列表组件" type="teacher_list" :singleImgStyle="Number(item.style)" :params="item.data":config="config" />
					</view>
					<view v-if="item.type==='weixin'">
						<Weixin title="关注公众号组件" type="weixin" :thisStyle="Number(item.style)" :config="config" />
					</view>
					<view v-if="item.type==='minishop_goods_list'">
						<MinishopGoodsList title="云小店商品列表组件" type="minishop_goods_list" :params="item.data" :config="config" />
					</view>
					<view v-if="item.type==='activity_list'">
						<ActivityList title="线下活动列表组件" type="activity_list" :params="item.data" :config="config" />
					</view>
					<view v-if="item.type==='scoreshop_goods_list'">
						<ScoreshopGoodsList title="积分商城商品列表组件" type="scoreshop_goods_list" :params="item.data" :config="config" />
					</view>
					<!-- #ifdef H5 -->
					<view v-if="item.type==='forum_list'">
						<ForumList title="社群列表组件" type="forum_list" :params="item.data" :config="config" />
					</view>
					<!-- #endif -->
				</view>
				<template v-if="config.copyright !== undefined">
					<CopyRight :data="config.copyright" />
				</template>
			</view>
			<tabBar v-if="!loading" />
		</view>
	</view>
	
</template>

<script>
	import { mapState,mapMutations,mapActions } from 'vuex'
	//DIY组件 按首字母顺序排列
	import ActivityList from '@/common/diys/ActivityList/ActivityList.vue' //线下活动组件
	import Announce from '@/common/diys/Announce/Announce.vue' //公告组件
	import ArticleList from '@/common/diys/ArticleList/ArticleList.vue' //文章列表组件
	import Category from '@/common/diys/Category/Category.vue' //分类组件
	import CategoryNav from '@/common/diys/CategoryNav/CategoryNav.vue' //图文导航组件
	import ColumnList from '@/common/diys/ColumnList/ColumnList.vue' //专栏列表组件
	import CustomForm from '@/common/diys/CustomForm/CustomForm.vue' //自定义表单组件
	import CustomText from '@/common/diys/CustomText/CustomText.vue' //自定义文本组件
	import ExamPaperList from '@/common/diys/ExamPaperList/ExamPaperList.vue' //题库试卷组件
	import KnowledgeList from '@/common/diys/KnowledgeList/KnowledgeList.vue' //课程列表组件
	import LiveList from '@/common/diys/LiveList/LiveList.vue' //直播课堂列表组件
	import MiniprogramLiveList from '@/common/diys/MiniprogramLiveList/MiniprogramLiveList.vue' //小直播列表组件
	import MaterialList from '@/common/diys/MaterialList/MaterialList.vue' //资料下载列表组件
	import Member from '@/common/diys/Member/Member.vue' //会员服务组件
	import MinishopGoodsList from '@/common/diys/MinishopGoodsList/MinishopGoodsList.vue' //云小店商品列表组件
	import OfflineList from '@/common/diys/OfflineList/OfflineList.vue' //线下课列表组件
	import ScoreshopGoodsList from '@/common/diys/ScoreshopGoodsList/ScoreshopGoodsList.vue' //积分商城商品列表组件
	import ForumList from '@/common/diys/ForumList/ForumList.vue' //社群列表组件
	import Search from '@/common/diys/Search/Search.vue' //搜索组件
	import SlideShow from '@/common/diys/SlideShow/SlideShow.vue' //轮播组件
	import SingleImg from '@/common/diys/SingleImg/SingleImg.vue' //单图广告组件
	import TeacherList from '@/common/diys/TeacherList/TeacherList.vue' //教师列表组件
	import Weixin from '@/common/diys/Weixin/Weixin.vue' //关注公众号组件
	
	//公共组件
	import CopyRight from '@/common/components/copyright.vue' //自定义版权
	import TabBar from "../common/tabBar.vue" //底部导航
	
	export default {
		name: 'index',
		components: {
			ActivityList,
			Announce,
			ArticleList,
			Category,
			CategoryNav,
			ColumnList,
			CustomForm,
			CustomText,
			ExamPaperList,
			KnowledgeList,
			LiveList,
			MiniprogramLiveList,
			MaterialList,
			Member,
			MinishopGoodsList,
			OfflineList,
			ScoreshopGoodsList,
			ForumList,
			Search,
			SlideShow,
			SingleImg,
			TeacherList,
			Weixin,
			CopyRight,
			TabBar,
		},
		data() {
			return {
				loading: true,
				urlParams: {},
				pageData : {}, //首页数据
				groupData: [], // 分片数据
				index: 0, // 分片索引
				processData: [], // 处理后数据
			}
		},

		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			console.log('refresh');
			uni.removeStorageSync('muu_classroom_config')
			uni.removeStorageSync('muu_classroom_page_data')
			
			Promise.all([
				// 重新获取页面数据
				this.getApiPageData(),
				// 更新全局配置
				this.setConfigAsync()
			]).then(()=>{
				//结束下拉刷新
				uni.stopPullDownRefresh();
			})
		},
		
		async onLoad(option) {
			await this.$onLaunched;
			this.urlParams = option
			//通过小程序码进入的获取参数
			if(option.scene){
				// options 中的 scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
				let scene = decodeURIComponent(option.scene); 
				let obj = {};
				for (var i = 0; i < scene.split('*').length;i++){
				  var arr = scene.split('*')[i].split('/');
				  obj[arr[0]] = arr[1];
				}
				this.urlParams.id = obj.id
				this.urlParams.promoter_uid = obj.u
				console.log(this.urlParams,'scene')
			}
			if(this.urlParams.promoter_uid){
				uni.setStorageSync('promoter_uid',this.urlParams.promoter_uid)
			}

			this.setConfigAsync().then(()=>{
				this.getUserInfo()
				this.initPage(this.config)
				this.getPageData()
			})
			
			//console.log('rootUrl', this.util.rootUrl())
		},
		onShow() {
			this.$store.commit('setPageIndex',0)
		},

		computed: {
			...mapState(['config', 'userInfo'])
		},
		methods: {
			...mapActions([
				'setConfigAsync',
				'getUserInfo'
			]),

			async initPage(config) {
				//设置原生导航栏
				//#ifdef MP
				this.setNavigation(config.style);
				//#endif
				
				let title = '云课堂'
				if(config.title !== undefined){
					title = config.title
				}
				setTimeout(()=>{
					//设置原生导航栏标题
					uni.setNavigationBarTitle({
					　　title: title
					})
				},200)
				
				// H5端分享设置
				//#ifdef H5
				if(config.share.title !== undefined){
					let url = window.location.href
					let memberInfo
					if(this.userInfo){
						memberInfo = this.userInfo.memberInfo || {}
					}
					if(memberInfo && memberInfo.uid !== undefined){
						url = url + '?promoter_uid=' + memberInfo.uid
					}
					let shareData = {
						title : config.share.title,
						desc : config.share.desc,
						img: config.share.icon
					}
					this.wechat.share(shareData,url);
				}
				//#endif
			},
			
			/**
			 * 获取页面数据
			 */
			async getPageData() {
				let that = this
				let cache_key = `muu_page_data_${this.urlParams.id ? this.urlParams.id : 'home'}`
				return new Promise((resolve, reject) => {
					
					//判断缓存是否存在
					if(that.util.muuCache(cache_key)){
						that.pageData = that.util.muuCache(cache_key)
						that.loading = false
						//分片加载
						that.groupData = that.util.arrayGroup(that.pageData.data, 8)
						that.processData = []
						that.load()
						resolve(that.pageData)
					}else{
						that.getApiPageData().then((pageData)=>{
							resolve(pageData)
						})
					}
				})
			},
			
			/**
			 * 获取接口数据
			 */
			async getApiPageData() {
				let that = this
				let cache_key = `muu_page_data_${this.urlParams.id ? this.urlParams.id : 'home'}`
				
				let data = {}
					data.type = 1
					data.m = 'muu_classroom'
				//获取首页数据
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/index'
					//#endif
					//#ifdef H5
					url = 'entry/site/index'
					//#endif
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						
						success: function (res) {
							if (res.data.code == 200) {
								
								that.pageData = res.data.data
								//设置本地缓存
								that.util.muuCache(cache_key,res.data.data, 7 * 24 * 60 *60)
								that.loading = false
								//分片加载
								that.groupData = that.util.arrayGroup(that.pageData.data, 8)
								that.index = 0
								that.processData = []
								that.load()
							}
							resolve(that.pageData)
						}
					})
				})
			},
			
			setNavigation: function(style) {
				let that = this
				//动态更改顶部状态栏演示
				let backgroundColor = '#ffffff'
				//console.log(this.config)
				if(style == 'Green'){
					backgroundColor = '#00ce74';
				}
				if(style == 'Blue'){
					backgroundColor = '#03b8cf';
				}
				if(style == 'LightRed'){
					backgroundColor = '#ea644a';
				}
				if(style == 'Orange'){
					backgroundColor = '#ff9900';
				}
				if(style == 'LightPink'){
					backgroundColor = '#ffb6c1';
				}
				if(style == 'Magenta'){
					backgroundColor = '#8666b8';
				}
				//更改小程序原生导航栏
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: backgroundColor,
				})
			},
			
			/**
			 * 分片渲染
			 */
			load() {
				let that = this;
				if(that.index == 0){
					that.groupData[that.index].forEach((item) => {
						that.processData.push(item)
					})
					that.index++
					// 递归
					this.load()
				}
				if(that.index > 0 && that.index < this.groupData.length - 1){
					setTimeout(() => {
						that.groupData[that.index].forEach((item) => {
							that.processData.push(item)
						})
						//console.log('that.processData', that.processData)
						that.index++
						// 递归
						this.load()
					}, 500)
				}
				//console.log('分片完成')
			}
		},
		
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {
			// 分享(分销)用户ID
			let promoterUid = this.userInfo.memberInfo.uid || 0
			let share = {
				title : this.config.title,
				path : '/muu_classroom/pages/index/index?' + '&promoter_uid=' + promoterUid,
				desc : this.config.description,
				success : function(){
					
				},
			}
			
			return share
		},
		/**
		 * 监听用户点击右上角转发到朋友圈
		 */
		onShareTimeline() {
			
		}
	}
</script>

<style lang="scss">
	.main-section {
		background-color: #fff;
	}
</style>
